{% extends "base_generic.html" %}

{% block content %}
<div class="card form-card">
  <form action="" method="post">
    {% csrf_token %}
    
    <div class="form-group">
      <label class="form-label" for="{{ form.title.id_for_label }}">
        {{ form.title.label }}
        <span class="text-danger">*</span>
      </label>
      {{ form.title }}
      <button type="button" id="fetch-book-info" class="btn-ai">AI Fill Info</button>
      {% if form.title.help_text %}
        <small class="text-muted">{{ form.title.help_text }}</small>
      {% endif %}
      {% for error in form.title.errors %}
        <div class="text-danger">{{ error }}</div>
      {% endfor %}
    </div>

    <div class="form-group">
      <label class="form-label" for="{{ form.author.id_for_label }}">
        {{ form.author.label }}
        <span class="text-danger">*</span>
      </label>
      {{ form.author }}
      {% if form.author.help_text %}
        <small class="text-muted">{{ form.author.help_text }}</small>
      {% endif %}
      {% for error in form.author.errors %}
        <div class="text-danger">{{ error }}</div>
      {% endfor %}
    </div>

    {% for field in form %}
      {% if field.name != 'title' and field.name != 'author' and field.name != 'summary' %}
      <div class="form-group">
        <label class="form-label" for="{{ field.id_for_label }}">
          {{ field.label }}
          {% if field.field.required %}<span class="text-danger">*</span>{% endif %}
        </label>
        {{ field }}
        {% if field.help_text %}
          <small class="text-muted">{{ field.help_text }}</small>
        {% endif %}
        {% for error in field.errors %}
          <div class="text-danger">{{ error }}</div>
        {% endfor %}
      </div>
      {% endif %}
    {% endfor %}

    <div class="form-group">
      <label class="form-label" for="{{ form.summary.id_for_label }}">
        {{ form.summary.label }}
        {% if form.summary.field.required %}<span class="text-danger">*</span>{% endif %}
      </label>
      <textarea class="rich-text" name="{{ form.summary.name }}" id="{{ form.summary.id_for_label }}" rows="5">{% if form.summary.value %}{{ form.summary.value }}{% endif %}</textarea>
      {% if form.summary.help_text %}
        <small class="text-muted">{{ form.summary.help_text }}</small>
      {% endif %}
      {% for error in form.summary.errors %}
        <div class="text-danger">{{ error }}</div>
      {% endfor %}
    </div>
    
    <button type="submit" class="btn-submit">Submit</button>
  </form>
</div>

<script>
document.getElementById('fetch-book-info').addEventListener('click', function() {
  const title = document.getElementById('{{ form.title.id_for_label }}').value;
  const author = document.getElementById('{{ form.author.id_for_label }}').value;
  
  if (!title || !author) {
    alert('Please enter both title and author');
    return;
  }

  this.disabled = true;
  this.textContent = 'Fetching...';
  
  fetch('/catalog/fetch-book-info/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': '{{ csrf_token }}'
    },
    body: JSON.stringify({
      title: title,
      author: author
    })
  })
  .then(response => response.json())
  .then(data => {
    if (data.isbn) {
      document.getElementById('{{ form.isbn.id_for_label }}').value = data.isbn;
    }
    if (data.summary) {
      document.getElementById('{{ form.summary.id_for_label }}').value = data.summary;
    }
  })
  .catch(error => {
    console.error('Error:', error);
    alert('Failed to fetch book info');
  })
  .finally(() => {
    this.disabled = false;
    this.textContent = 'AI Fill Info';
  });
});
</script>

<style>
.btn-ai {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-left: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-ai:hover {
  background-color: #45a049;
}

.btn-ai:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>
{% endblock %}
